<
コンテンツ
説明 バグレポート

さまざまな種類の項目を含むリストを作成する

コンテンツ

さまざまな種類のコンテンツを表示するリストの作成が必要になる場合があります。 たとえば、見出しを表示するリストを作成しているとします。 次に、見出しに関連するいくつかの項目が続き、その後に別の見出しが続きます。 等々。

Flutter を使用してそのような構造を作成する方法は次のとおりです。

  1. さまざまなタイプの項目を含むデータ ソースを作成します。
  2. データ ソースをウィジェットのリストに変換します。

1. さまざまな種類の項目を含むデータ ソースを作成する

アイテムの種類

リスト内のさまざまなタイプの項目を表すには、次のように定義します。 アイテムのタイプごとにクラス。

この例では、ヘッダーとそれに続く 5 つのヘッダーを表示するアプリを作成します。 メッセージ。したがって、次の 3 つのクラスを作成します。ListItem、HeadingItem、 とMessageItem。

/// The base class for the different types of items the list can contain.
abstract class ListItem {
  /// The title line to show in a list item.
  Widget buildTitle(BuildContext context);

  /// The subtitle line, if any, to show in a list item.
  Widget buildSubtitle(BuildContext context);
}

/// A ListItem that contains data to display a heading.
class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);

  @override
  Widget buildTitle(BuildContext context) {
    return Text(
      heading,
      style: Theme.of(context).textTheme.headlineSmall,
    );
  }

  @override
  Widget buildSubtitle(BuildContext context) => const SizedBox.shrink();
}

/// A ListItem that contains data to display a message.
class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);

  @override
  Widget buildTitle(BuildContext context) => Text(sender);

  @override
  Widget buildSubtitle(BuildContext context) => Text(body);
}

アイテムのリストを作成する

ほとんどの場合、インターネットまたはローカルからデータを取得します。 データベースを取得し、そのデータを項目のリストに変換します。

この例では、作業する項目のリストを生成します。リスト ヘッダーとそれに続く 5 つのメッセージが含まれます。各メッセージには 1 つあります 3種類:ListItem、HeadingItem、 またMessageItem。

final items = List<ListItem>.generate(
  1000,
  (i) => i % 6 == 0
      ? HeadingItem('Heading $i')
      : MessageItem('Sender $i', 'Message body $i'),
);

2. データソースをウィジェットのリストに変換します。

各アイテムをウィジェットに変換するには、 使用ListView.builder()コンストラクタ。

一般に、どのような型であるかをチェックするビルダー関数を提供します。 扱っているアイテムの情報を取得し、適切なウィジェットを返します そのタイプのアイテムの場合。

ListView.builder(
  // Let the ListView know how many items it needs to build.
  itemCount: items.length,
  // Provide a builder function. This is where the magic happens.
  // Convert each item into a widget based on the type of item it is.
  itemBuilder: (context, index) {
    final item = items[index];

    return ListTile(
      title: item.buildTitle(context),
      subtitle: item.buildSubtitle(context),
    );
  },
)

インタラクティブな例

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(
      items: List<ListItem>.generate(
        1000,
        (i) => i % 6 == 0
            ? HeadingItem('Heading $i')
            : MessageItem('Sender $i', 'Message body $i'),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<ListItem> items;

  const MyApp({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    const title = 'Mixed List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          // Let the ListView know how many items it needs to build.
          itemCount: items.length,
          // Provide a builder function. This is where the magic happens.
          // Convert each item into a widget based on the type of item it is.
          itemBuilder: (context, index) {
            final item = items[index];

            return ListTile(
              title: item.buildTitle(context),
              subtitle: item.buildSubtitle(context),
            );
          },
        ),
      ),
    );
  }
}

/// The base class for the different types of items the list can contain.
abstract class ListItem {
  /// The title line to show in a list item.
  Widget buildTitle(BuildContext context);

  /// The subtitle line, if any, to show in a list item.
  Widget buildSubtitle(BuildContext context);
}

/// A ListItem that contains data to display a heading.
class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);

  @override
  Widget buildTitle(BuildContext context) {
    return Text(
      heading,
      style: Theme.of(context).textTheme.headlineSmall,
    );
  }

  @override
  Widget buildSubtitle(BuildContext context) => const SizedBox.shrink();
}

/// A ListItem that contains data to display a message.
class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);

  @override
  Widget buildTitle(BuildContext context) => Text(sender);

  @override
  Widget buildSubtitle(BuildContext context) => Text(body);
}